import React from 'react'
import PropTypes from 'prop-types'
import {Col, DatePicker, AutoComplete, Form, Input, InputNumber, Modal, Row, Select} from 'antd'

const FormItem = Form.Item
const {Option} = Select

const formItemLayout = {
  labelCol: {span: 8},
  wrapperCol: {span: 16},
  style: {
    marginBottom: 10,
  },
}

const ColProps = {
  xl: 6,
  md: 8,
  sm: 12,
  xs: 24,
  style: {
    marginBottom: 6,
  },
}

const modal = ({
                 item = {},
                 onOk,
                 handleSearch,
                 dataSource,
                 handleFormReset,
                 toggleForm,
                 empList,
                 figureIp,
                 friendCircleType,
                 source,
                 operateStatus,
                 form: {
                   getFieldDecorator,
                   validateFields,
                   getFieldsValue,
                 },
                 ...modalProps
               }) => {
  const handleOk = () => {
    validateFields((errors) => {
      if (errors) {
        return
      }
      const fields = getFieldsValue()
      const {operator, bankingInfo} = fields
      let lastFriendCircleUpdateTime = operator.lastFriendCircleUpdateTime
      let registerTime = operator.registerTime
      if (lastFriendCircleUpdateTime) {
        lastFriendCircleUpdateTime = lastFriendCircleUpdateTime.format('YYYY-MM-DD hh:mm:ss')
      }
      if (registerTime) {
        registerTime = registerTime.format('YYYY-MM-DD hh:mm:ss')
      }
      const data = {
        operator: {
          ...operator,
          lastFriendCircleUpdateTime,
          registerTime,
        },
        bankingInfo: {
          ...bankingInfo,
        },
        key: item.key,
      }
      onOk(data)
    })
  }

  const handleBelongSelect = (value, {props}) => {
    getFieldDecorator('operator.belongEmpName', {initialValue: props.children})
  }

  const handlePromoterSelect = (value, {props}) => {
    getFieldDecorator('operator.promoterName', {initialValue: props.children})
  }

  const modalOpts = {
    ...modalProps,
    onOk: handleOk,
  }

  return (
    <Modal {...modalOpts}>
      <Form layout="horizontal">
        <Row gutter={24}>
          <Col {...ColProps} >
            <FormItem {...formItemLayout} label="运营微号">
              {getFieldDecorator('operator.wxId')(<Input placeholder="运营微信号"/>)}
            </FormItem>
          </Col>
          <Col {...ColProps}>
            <FormItem {...formItemLayout} label="归属员工">
              {getFieldDecorator('operator.belongEmp.id')(
                <AutoComplete
                  dataSource={empList.map(item => <Option key={item.id}>{item.name}</Option>)}
                  style={{width: '100%'}}
                  onSearch={handleSearch}
                  placeholder="员工编号或名称"
                  onSelect={handleBelongSelect}
                />,
              )}
            </FormItem>
          </Col>
          <Col {...ColProps}>
            <FormItem {...formItemLayout} label="推广员工">
              {getFieldDecorator('operator.promoter.id')(
                <AutoComplete
                  dataSource={empList.map(item => <Option key={item.id}>{item.name}</Option>)}
                  style={{width: '100%'}}
                  onSearch={handleSearch}
                  onSelect={handlePromoterSelect}
                  placeholder="员工编号或名称"
                />,
              )}
            </FormItem>
          </Col>
          <Col {...ColProps}>
            <FormItem {...formItemLayout} label="支付密码">
              {getFieldDecorator('operator.pay.payPassword')(<Input placeholder="支付密码"/>)}
            </FormItem>
          </Col>
        </Row>
        <Row gutter={24}>
          <Col {...ColProps}>
            <FormItem {...formItemLayout} label="登陆密码">
              {getFieldDecorator('operator.loginPassword')(<Input placeholder="登陆密码"/>)}
            </FormItem>
          </Col>
          <Col {...ColProps}>
            <FormItem {...formItemLayout} label="人物IP">
              {getFieldDecorator('operator.ip.id')(
                <Select allowClear onSelect={(value, {props}) => {
                  getFieldDecorator('operator.ipName', {initialValue: props.children})
                }} placeholder="请选择">
                  {figureIp.map(item => (<Option value={item.id}>{item.name}</Option>))}
                </Select>,
              )}
            </FormItem>
          </Col>
          <Col {...ColProps}>
            <FormItem {...formItemLayout} label="好友总数">
              {getFieldDecorator('operator.friendNum')(<Input placeholder="请输入"/>)}
            </FormItem>
          </Col>
          <Col {...ColProps}>
            <FormItem {...formItemLayout} label="朋友圈类型">
              {getFieldDecorator('operator.friendCircle.id')(
                <Select allowClear onSelect={(value, {props}) => {
                  getFieldDecorator('operator.friendCircleTypeName', {initialValue: props.children})
                }} placeholder="请选择">
                  {friendCircleType.map(item => (<Option value={item.id}>{item.name}</Option>))}
                </Select>,
              )}
            </FormItem>
          </Col>
        </Row>
        <Row gutter={24}>
          <Col {...ColProps}>
            <FormItem {...formItemLayout} label="自身来源">
              {getFieldDecorator('operator.source.id')(
                <Select allowClear onSelect={(value, {props}) => {
                  getFieldDecorator('operator.sourceName', {initialValue: props.children})
                }} placeholder="请选择">
                  {source.map(item => (<Option value={item.id}>{item.name}</Option>))}
                </Select>,
              )}
            </FormItem>
          </Col>
          <Col {...ColProps}>
            <FormItem {...formItemLayout} label="运营状态">
              {getFieldDecorator('operator.operateStatus.id')(
                <Select allowClear onSelect={(value, {props}) => {
                  getFieldDecorator('operator.operateStatusName', {initialValue: props.children})
                }} placeholder="请选择">
                  {operateStatus.map(item => (<Option value={item.id}>{item.name}</Option>))}
                </Select>,
              )}
            </FormItem>
          </Col>
          <Col {...ColProps}>
            <FormItem {...formItemLayout} label="绑定手机">
              {getFieldDecorator('operator.bindPhoneNum')(<Input placeholder="请输入"/>)}
            </FormItem>
          </Col>
        </Row>
        <Row gutter={24}>
          <Col {...ColProps}>
            <FormItem {...formItemLayout} label="最后更新时间">
              {getFieldDecorator('operator.lastFriendCircleUpdateTime')(<DatePicker placeholder="请选择"/>)}
            </FormItem>
          </Col>
          <Col {...ColProps}>
            <FormItem {...formItemLayout} label="被封次数">
              {getFieldDecorator('operator.bannedTimes')(<InputNumber placeholder="请输入"/>)}
            </FormItem>
          </Col>
        </Row>
        <Row gutter={24}>
          <Col {...ColProps}>
            <FormItem {...formItemLayout} label="注册日期">
              {getFieldDecorator('operator.registerTime')(<DatePicker placeholder="请选择"/>)}
            </FormItem>
          </Col>
          <Col {...ColProps} xl={{span: 15}}>
            <FormItem labelCol={{span: 3}} wrapperCol={{span: 21}} label="支付绑定">
              <Col span={3}>
                <FormItem>
                  {getFieldDecorator('bankingInfo.cardHolderName')(<Input placeholder="持卡人姓名"/>)}
                </FormItem>
              </Col>
              <Col span={1}>
                <span style={{display: 'inline-block', width: '100%', textAlign: 'center'}}>
                  -
                </span>
              </Col>
              <Col span={6}>
                <FormItem>
                  {getFieldDecorator('bankingInfo.idCardNo')(<Input placeholder="身份证"/>)}
                </FormItem>
              </Col>
              <Col span={1}>
                <span style={{display: 'inline-block', width: '100%', textAlign: 'center'}}>
                  -
                </span>
              </Col>
              <Col span={6}>
                <FormItem>
                  {getFieldDecorator('bankingInfo.bankCardNum')(<Input placeholder="银行卡"/>)}
                </FormItem>
              </Col>
              <Col span={1}>
                <span style={{display: 'inline-block', width: '100%', textAlign: 'center'}}>
                  -
                </span>
              </Col>
              <Col span={4}>
                <FormItem>
                  {getFieldDecorator('bankingInfo.phoneNum')(<Input placeholder="预留手机号"/>)}
                </FormItem>
              </Col>
            </FormItem>
          </Col>
        </Row>
      </Form>
    </Modal>
  )
}

modal.propTypes = {
  form: PropTypes.object.isRequired,
  type: PropTypes.string,
  item: PropTypes.object,
  onOk: PropTypes.func,
}

export default Form.create()(modal)
